<template>
    <div
        class="cooperation"
        v-loading="loading"
        :element-loading-text="'正在计算与' + this.nodeInfo.data.name + '公司存在竞争关系的公司'"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
    >
        <div class="drawer-header" style="justify-content: space-between">
            <div style="display: flex; justify-content: left; align-items: center">
                <el-image style="width: 40px; height: 40px" :src="require('../../assets/img/competeGraph.png')" fit="true"></el-image>
                <h3 style="margin-left: 10px">竞争公司图谱</h3>
            </div>

            <el-image
                style="width: 40px; height: 40px; margin-right: 0px"
                :src="require('../../assets/img/compete.png')"
                fit="true"
            ></el-image>
        </div>
        <div class="small-graph" ref="svgMain">
            <DrawerGraph ref="graph" :labels="labels" :names="names" :linkTypes="linkTypes" :height="svgHeight" :width="svgWidth">
            </DrawerGraph>
        </div>
        <div class="drawer-header">
            <el-image style="width: 40px; height: 40px" :src="require('../../assets/img/competeTable.png')" fit="true"></el-image>
            <h3 style="margin-left: 10px">竞争公司列表</h3>
        </div>
        <div class="company-table">
            <el-table :data="listCompeteCompany" style="width: 100%" highlight-current-row border>
                <el-table-column type="index" width="40px"></el-table-column>
                <!--              合作相关性-->
                <el-table-column :label="this.type==='compete'?'竞争相关性':'合作相关性'" prop="metric" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.metric >= 0.8 ? 'danger' : 'warning'">{{ scope.row.metric }}</el-tag>
                    </template>
                </el-table-column>
                <!--              公司名称-->
                <el-table-column label="公司名称" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.properties.name }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div style="display: flex; justify-content: center; align-content: center">
                            <el-button size="mini" type="warning" @click="toCooperationNode(scope.row)">查看图谱</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-row type="flex">
                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="primary"><h4>公司官网:</h4></el-tag>
                                            <a target="_blank" :href="'http://' + props.row.properties.org_website" class="text-span">{{
                                                props.row.properties.org_website
                                            }}</a>
                                        </div>
                                    </template>
                                </el-form-item>
                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="primary">
                                                <h4>股票代码</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.code }}</span>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="success">
                                                <h4>公司全称</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.fullname }}</span>
                                        </div>
                                    </template>
                                </el-form-item>

                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="success">
                                                <h4>上市日期</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.listed_date }}</span>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-row>

                            <el-row>
                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="warning">
                                                <h4>主营业务</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.main_operation_business }}</span>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-row>

                            <el-row>
                                <el-form-item>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="info">
                                                <h4>注册地址</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.reg_address_cn }}</span>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-row>

                            <el-row>
                                <el-form-item l>
                                    <template slot-scope="label">
                                        <div class="row-item">
                                            <el-tag type="info">
                                                <h4>官方邮箱</h4>
                                            </el-tag>
                                            <span class="text-span">{{ props.row.properties.email }}</span>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getCompeteCompany, getCooperationCompany } from '@/api/graphData';
import DrawerGraph from '@/components/graph/DrawerGraph.vue';

export default {
    name: 'compete',
    components: { DrawerGraph },
    data() {
        return {
            tableData: [],
            loading: false,
            listCompeteCompany: [],
            names: ['公司名称', '工业', '产品', '国家'],
            labels: ['company', 'industry', 'product', 'Country'],
            linkTypes: ['', 'suoshuhangye', 'zhuyingchanpin', 'chanpinxiaolei', 'shangyoucailiao'],
            svgHeight: 600,
            svgWidth: 1000
        };
    },
    props: {
        nodeInfo: {
            type: Object,
            required: true
        },
        type:{
            type:String,
            required: true
        }
    },
    async mounted() {
        //  获取父盒子宽度与高度
        this.svgHeight = this.$refs.svgMain.offsetHeight;
        this.svgWidth = this.$refs.svgMain.offsetWidth;
        // 清空state中的数据
        this.$store.commit('clearDrawerData');
        // 查询数据
        this.loading = true;
        await getCompeteCompany(this.nodeInfo.data.name, this.nodeInfo.id)
            .then((response) => {
                console.log('cooperation');
                console.log(response.data.data);
                let data = response.data.data;
                this.$store.commit('setDrawerDataNode', data.kgCompeteCompany);
                this.$store.commit('setDrawerDataLink', data.relationship);
                this.listCompeteCompany = data.listCompeteCompany;
                this.$refs.graph.d3init();
                this.loading = false;
            })
            .catch((err) => {
                this.loading = false;
            });
    },
    methods: {
        toCooperationNode(data) {
            this.$bus.$emit('toCooperationNode', { nodeInfo: data });
        }
    }
};
</script>

<style scoped>
.cooperation {
    margin: 10px;
    height: 100%;
}
.small-graph {
    width: 100%;
    height: 350px;
    border: 3px solid rgb(120, 120, 120);
}
.detail-info-item {
    display: flex;
    justify-content: space-between;
    align-content: center;
}
.row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text-span {
    padding-left: 5px;
}
.drawer-header {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
</style>
